import React,{useEffect,useState} from 'react';
// import CusManage from './CustomerSeasM';
// import ImportDate from './ImportRepeatingData';
// import PendingAudit from './PendingAudit';
// import ExportData from './ExportData';
import AddCus from './AddHighSeaCus';
import { DownOutlined} from "@ant-design/icons";
import "./../../assets/css/cusHighSeas/index.css";
import HeighRes from './HeighSearch';
import { Select, Button, Modal, ConfigProvider,Pagination,message,Popconfirm} from 'antd';
import zhCN from 'antd/lib/locale/zh_CN'; 
import { //1. 下载路由npm i react-router-dom   2.引入
    // BrowserRouter as Router, // history模式，
    // Route , // 路由的定义
    // Routes,
    Link,  //类似于a
    Outlet,
    useNavigate //用于设置默认路由
} from 'react-router-dom'
import { inject, observer } from 'mobx-react';

const Index = (props) => {
  let navigate=useNavigate()
  const [classIndex, setClassIndex] = useState(0)
  const [classres, setclassres] = useState(true);
  const [arrowchange, setArrowchange] = useState(false);
  const { Option } = Select;
  const [resInput,setResInput]=useState('')
  const footerData = [{ value: '张三', text: '张三' }, { value: '李四', text: '李四' }]
  const [userId, setUserId] = useState('')
  const [params, setParams] = useState({
    user_id: '',
    customer_id:[]
  })

  //页码
  // const [total,setTotal] = useState(0) // 总条数
  // const [page,setPage] = useState(props.cushighseaStore.currentPage)  // 设置默认页码
  // const [pageSize,setPageSize] = useState(props.cushighseaStore.pageSize) //每页条数
  function changePage(currentPage,pageSize){
    props.cushighseaStore.currentPage=currentPage
    props.cushighseaStore.pageSize=pageSize
  }

  //获取customer_id的数组
  const cusIds = () => {
        let arr = [];
        for (let i = 0; i < props.cushighseaStore.selectedRowKeys.length; i++) { 
            arr.push(props.cushighseaStore.selectedRowKeys[i])
    }
        setParams({
          ...params,
          ['customer_id']:arr
        });
  };
  //获取转移时user_id   Ant form表单元素,可以通过onChange获取当前变化的值
  const UserId = (value) => { 
    setUserId(value)
    console.log('useId', value)
  }
  //转移事件
  const Transfer = () => {
    setParams({
      ...params,
      ['user_id']:userId
    });
    if (!props.cushighseaStore.selectedRowKeys.length) {
      message.warning('未选择');
    }
    console.log('arr', params)
  }
  const changeClass=(e)=>{
    setClassIndex(e.currentTarget.getAttribute("data-index"));
  }
  const resBoxchange=()=> {
    setclassres(!classres);
    setArrowchange(!arrowchange);
  }  
  //模态框相关
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
      setIsModalVisible(true);
  };
  const handleOk = () => {
      setIsModalVisible(false);
  };
  const handleCancel = () => {
      setIsModalVisible(false);
  };
  //设置默认路由
  useEffect(() => {
    navigate('./cusManage')
  }, []); //eslint-disable-line

   //普通搜索
   const onSearch = () => {
     setResInput(document.getElementById("cusHighRes").value)
  }
   //通过批量审核
  const applyAllPass = () => {
    cusIds();
    if (!props.cushighseaStore.selectedRowKeys.length) {
      message.warning('未选择');
    }
  }

  //通过批量审核请求
  useEffect(() => { 
    if (!props.cushighseaStore.selectedRowKeys.length) {
      console.log('未选择');
    } else { 
      props.cushighseaStore.applyPassData(params)
    }
  },[params])
  //获取页面请求
 useEffect(() => { 
   if (resInput == '' && classIndex == '0'||(resInput == '' && classIndex == '3')) {
     props.cushighseaStore.getCusHighSeaMData({ currentPage: props.cushighseaStore.currentPage, pageSize: props.cushighseaStore.pageSize }).then(() => props.cushighseaStore.count)
   } else if (resInput == '' && classIndex == '1') {
     props.cushighseaStore.pendingAuditData({ currentPage: props.cushighseaStore.currentPage, pageSize: props.cushighseaStore.pageSize }).then(() =>  props.cushighseaStore.count)
   } else { 
     props.cushighseaStore.getCusHighSeaResData({customer_name:resInput})
   }
   console.log('CHSindex');
  },[resInput,props.cushighseaStore.currentPage,props.cushighseaStore.currentPage])
  return (<div id='CSHRouter'>
      {/* <Router> */}
        <div className="CusHighSeaRourter">
          <ul> 
            <li className={"0"===classIndex?"active1":""} onClick={changeClass} data-index="0"><Link to='/home/cusManage'>公海客户管理</Link> <span>4</span></li>
            <li className={"1"===classIndex?"active1":""} onClick={changeClass} data-index="1"><Link to='/home/pendingAudit'>待审核申请</Link> <span>4</span></li>
            <li className={"2"===classIndex?"active1":""} onClick={changeClass} data-index="2"><Link to='/home/exportData'>数据导出</Link></li>
            <li ><button  onClick={showModal}>新增公海客户</button></li>
          </ul>
          <div className='CHSright' >
            <input type="text" placeholder='请输入客户名称' id='cusHighRes'/>
            <button onClick={onSearch}>搜索</button>
        <button className='CHSResBtn' onClick={resBoxchange} >
              高级搜索
              <DownOutlined className={arrowchange ? "arrowup" : "arrowdown"}/>
            </button>
          </div>
            {/* 高级搜索框 */}
          <div className={classres ? "resBoxNone" : "resBoxShow"}>
            <HeighRes/>
          </div>
        </div>
         {/* 新增模态框 */}
        <Modal title="新增客户" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width="550px"
                footer={[
                  // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                  <Button key="back" onClick={handleCancel}>取消</Button>,
                  <Button key="submit" type="primary" onClick={handleOk}>确定</Button>]}
        >
            <AddCus/>
        </Modal>
        {/* 3.配置路由路径 */}
        <Outlet/>
            {/* <Routes>
              <Route index element={<CusManage />} />
              <Route path="/cusManage" element={<CusManage />} />
              <Route path="/importDate" element={<ImportDate />} />
              <Route path="/pendingAudit" element={<PendingAudit />} />
              <Route path="/exportData" element={<ExportData />} />
            </Routes>
      </Router>  */}
      <footer id='CHSfooter'>
        <div>
          将选中信息批量
              <button className='BtnPass1' onClick={applyAllPass}>通过审核</button>
              <button className='BtnNo1'>拒绝审核</button>
              转移给：
              <Select onChange={UserId} defaultValue="select" allowClear={true} style={{width: 120}} placeholder='请选择'>
                <Option value="select">请选择</Option>
                { footerData.map((item,index)=>
                  <Option value={item.value} key={index}>{item.text}</Option>
                )}
            </Select>
            <button className='BtnTransfer' onClick={Transfer}>转移</button>
            <button className='BtnClearAll'>清空所有公海信息</button>
        </div>
    </footer>
    {/* 页码 */}
    <div id='CHSpage'>
      <ConfigProvider locale={zhCN} >
        <Pagination
          total={props.cushighseaStore.count}
          showSizeChanger
          showQuickJumper
          size="large"
          defaultPageSize={props.cushighseaStore.pageSize}
          // showTotal={() => `总共 ${props.cushighseaStore.count} 条`}
          onChange={changePage} //页码改变事件
        />
      </ConfigProvider>
    </div>
  </div>

  )
}
export default inject('cushighseaStore')(observer(Index))